<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-闭包实现命令模式</title>
</head>

<body>
    <button class="open">开机</button>
    <button class="close">关机</button>
    <script>
        /**
         * 1.命令模式得意图，是把请求封装成对象，分离请求得发起者和接收者之间得耦合关系
         * 2.再命令执行前，可以预先往命令得对象中植入命令得接收者
         * 3.JS得函数作为一等对象，本身可以四处传递。所以再实现上，往往不需要像其他语言。去通过类创建对象的接口实现
         *   只需要传递对象即可
         * 
         * 
         */

        /* 开关电视机案例 */
        // 一个电视机
        const Tv = {
            open() {
                console.log('打开电视机');
            },
            close() {
                console.log('关闭电视机');
            }
        }
        // 多条指令,封装开关机请求
        const OpenTvCommand = function (receiver) {
            //指令的接受者传入
            this.receiver = receiver
        }
        //原型方法do即调用接收对象的open方法
        OpenTvCommand.prototype.do = function () {
            this.receiver.open()
        }
        OpenTvCommand.prototype.undo = function () {
            this.receiver.close()
        }

        //调用函数开关电视机
        let setCommand = function (command) {
            document.querySelector('.open').onclick = function () {
                //点击按钮,发起请求 指令对象只负责发出指令
                command.do()
            }
            document.querySelector('.close').onclick = function () {
                //点击按钮,发起请求 指令对象只负责发出指令
                command.undo()
            }
        }
        setCommand(new OpenTvCommand())
    </script>
</body>

</html>